<template>
  <BasicTabs v-model="tabname" :tabs="tabs"  @tabChange="tabsChange"> </BasicTabs>
</template>
<script setup lang="ts">
  import { TabPaneItem } from '@/components/ui/basic-tabs/types'
  import GroupStatus_Blowing from '../components/tabComponents/blowroom/groupStatus_Blowing.vue'
  import BlowingDetail from '../components/tabComponents/blowroom/blowingDetail.vue'
  import ChangeSettings from '../components/tabComponents/changeSettings.vue'
  import HistoricalTrendChart from '../components/tabComponents/historicalTrendChart/index.vue'

  const tabname = ref()
  const tabs = shallowRef<TabPaneItem[]>([
    {
      name: '111010',
      label: '状态总览',
      roles: ['111010'],
      slots: { default: h(GroupStatus_Blowing, { statusCode: '111010', processName: '清花' }) }
    },
    {
      name: '111070',
      label: '抓棉详情',
      roles: ['111070'],
      slots: {
        default: h(BlowingDetail, { statusCode: '111070', processName: '清花', detailName: '抓棉' })
      }
    },
    {
      name: '111080',
      label: '混棉详情',
      roles: ['111080'],
      slots: {
        default: h(BlowingDetail, { statusCode: '111080', processName: '清花', detailName: '混棉' })
      }
    },
    {
      name: '111090',
      label: '开棉详情',
      roles: ['111090'],
      slots: {
        default: h(BlowingDetail, { statusCode: '111090', processName: '清花', detailName: '开棉' })
      }
    },
    {
      name: '111060',
      label: '设置变更',
      roles: ['111060'],
      slots: { default: h(ChangeSettings, { statusCode: '111060', processName: '抓棉' }) }
    },
    {
      name: '111050',
      label: '历史趋势图',
      roles: ['111050'],
      slots: { default: h(HistoricalTrendChart, { statusCode: '111050', processName: '抓棉' }) }
    }
  ])

  const tabsChange = (tab) => {
    console.log(tab)
  }

  // onMounted(() => {})
</script>
<style lang="scss"></style>
